<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0" />
    <title><{$title}></title>
    <link rel="stylesheet" type="text/css" href="<{$preStaticUrl}>Wap/css/style.css?v=<{$resVersion}>"/>

    <script src="<{$preStaticUrl}>Wap/js/jquery-2.1.4.min.js?v=<{$resVersion}>"></script>

    <script src="<{$preStaticUrl}>layer/layer.js?v=<{$resVersion}>"></script>

    <!--<script src="<{$preStaticUrl}>layer_mobile/layer.js"></script>-->
    <!--<link rel="stylesheet" type="text/css" href="<{$preStaticUrl}>layer_mobile/need/layer.css"/>-->

    <script>
        var CurrentPlantform='<{$plantform}>';
    </script>
    <{if $isWechat }>

    <script src=" https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <{if $limitZone eq '1'}>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=LRABZ-POCH4-AFOU4-D3JEW-B6R6H-EWF2W"></script>
    <{/if}>
    <script>
        wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: "<{$wxSign.appId}>", // 必填，公众号的唯一标识
                    timestamp: "<{$wxSign.timestamp}>", // 必填，生成签名的时间戳
                    nonceStr: "<{$wxSign.nonceStr}>", // 必填，生成签名的随机串
                    signature:"<{$wxSign.signature}>",// 必填，签名，见附录1
                    jsApiList: [
                        'checkJsApi',
                        'chooseWXPay',
                        'getLocation',
                    <{if $isWxShare}>
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage'
                    <{/if}>
                    ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        <{if $isWxShare}>
        var shareData = {
            title:"<{$wxTitle}>",
            desc: "<{$wxDesc|default:$wxTitle}>",
            link: "<{$wxLink}>",
            imgUrl: "<{$wxImage}>",
            trigger: function (res) {
                // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
                // alert('用户点击发送给朋友');
            },
            success: function (res) {
                layer.closeAll()
                $.getJSON("<{U('redpackShare')}>",function(result){
                    console.log(result);
                    if(result.status == 0 ){
                        msg(result.msg);
                        $('#timesShow').text(result.times);
                    } else{
                        msg(result.msg);
                    }
                })
            },
            cancel: function (res) {
                layer.closeAll()
            },
            fail: function (res) {
                // alert(JSON.stringify(res));
                msg('分享失败');
                layer.closeAll()
            }
        };
        <{/if}>

        var address='';
        <{if $limitZone eq '1'}>
                var geocoder = new qq.maps.Geocoder({
                    complete:function(result){
                        address=result.detail.address;
                        $('#openbtn').removeClass('gray').unbind().on('click',openPack);
                        layer.closeAll();
                    }
                });
        <{/if}>
        wx.ready(function () {
            <{if $isWxShare}>
                wx.onMenuShareAppMessage(shareData);
                wx.onMenuShareTimeline(shareData);
            <{/if}>
            <{if $limitZone eq '1'}>
            layer.load(1,{offset:['300px','350px']});
            wx.getLocation({
                type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                success: function (res) {
                    latitude = parseFloat(res.latitude); // 纬度，浮点数，范围为90 ~ -90
                    longitude = parseFloat(res.longitude); // 经度，浮点数，范围为180 ~ -180。
                    var coord=new qq.maps.LatLng(latitude,longitude);
                    geocoder.getAddress(coord);

                },
                fail: function(res) {
                    layer.closeAll();
                    msg('本次抽奖限指定地区用户参加，请开启定位功能，便于确认所在地区');
                },
                cancel: function (res) {
                    layer.closeAll();
                    msg('本次抽奖限指定地区用户参加，请开启定位功能，便于确认所在地区');
                }
            });
            <{/if}>
        });



    </script>
    <{/if}>
    <link rel="stylesheet" 	href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="/Public/Wap/redpack/leaves.css?1" type="text/css" media="screen" charset="utf-8">
    <!-- The leaves.js file creates the leaves -->
    <script src="/Public/Wap/redpack/leaves.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        html,body{width: 100%; height:100%;}
        .layui-layer{width:600px;}
        .layui-layer-dialog .layui-layer-content{font-size:4rem !important;word-break: break-all;line-height: 4rem;white-space: normal;}
        #successMSG * {font-size: 2.3rem}
        .img2{
            position:absolute;left:205px;top:836px;z-index:5;border-style:hidden
        }
        #times{
            position: absolute; left: 180px;top:943px;z-index: 1;
            font-size: 29px;
            width: 100%;
            font-weight:600;
            text-align:center
        }
        .img3{
            position:absolute;left:298px;top:986px;z-index:1;border-style:hidden
        }
        .img4{
            position:absolute;left:150px;top:250px;z-index:1;border-style:hidden
        }
        .img5{
            position:absolute;left:245px;top:633px;z-index:1;border-style:hidden
        }
        .img6{
            position:absolute;left:300px;top:864px;z-index:1;border-style:hidden
        }
        .t1{
            position:absolute;left:120px;top:70px;z-index:5;border-style:hidden;text-align: center
        }
        .gray {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray;
        }
        #animal{position: absolute;Z-INDEX: 4;left: 246px;top: 585px;}
        #ruledesc{position: absolute;font-size: 2.2rem;padding: 5rem;top:10rem}
        #prizeListDiv{
            position: absolute;
            line-height: 4rem;
            padding-top: 2rem;
            text-align: center;
            width: 100%;
            font-size: 2rem;
        }
        #prizeList{font-size: 30px;position: absolute;left:600px;top:24px;z-index: 1;word-break: keep-all}
        .huadong {height:7rem;padding: 0.5rem 0 0.3rem 0; font: 12px/1.5 "Hiragino Sans GB","Microsoft YaHei",simsun;margin:0 auto;overflow: hidden;width: 50rem;position: absolute;top:1052px;left:163px;}
        .huadong .huabox {margin:0 auto; width: 80%; line-height: 2rem;}
        .huadong .notice_active {float: left;width: 30rem;height: 6rem;padding: 0;overflow: hidden;position: relative;}
        .huadong .notice_active li{list-style-type:none;line-height: 1.9rem;overflow: hidden;height:2.5rem;margin-bottom: 1.2rem;}
        .huadong .notice_active li.notice_active_ch span {color:#111;font-size:2.3rem;display: block;text-align: center;margin-bottom:0.5rem;}


        #tip{width: 532px;height:254px;display:none;background: url("/Public/Wap/redpack/tip.png") no-repeat;}
        #tip #table{width:100%;height: 100%;display:table}
        #tip #table  #content{width:500px;font-size: 3rem;text-align: center; vertical-align: middle;display:table-cell;padding:3rem;}
    </style>


    <script type="text/javascript">
        function timer(opj){
            $(opj).find('ul').animate({
                marginTop : "-2.4rem"
            },500,function(){
                $(this).css({marginTop : "0rem"}).find("li:first").appendTo(this);
            })
        }
        $(function(){
            var num = $('.notice_active').find('li').length;
            if(num > 1){
                var time=setInterval('timer(".notice_active")',3500);
            }


        });
    </script>
</head>
<body style="width: 750px;overflow: hidden">
<div id='tu1' style="display: none;">
    <img src="/Public/Wap/redpack/share_bg.png" id='success'  alt="领取成功" >
    <input class='img4 shareBtn' name="imgbtn" type="image" src="/Public/Wap/redpack/sharebt_r.png" width="281" height="93" alt="分享按钮1" onclick="reP()">
    <img src="/Public/Wap/redpack/sharebt_y.png" class="shareBtn" id='img1' width="281" height="93" alt="分享按钮2" style='position:absolute;left:150px;top:250px; z-index:2 ;border:0;display:none;'>
    <div class='t1' >
        <div id="successMSG">
            <span>红包领取成功，打开微信即可领取！</span><br>
            <span id="nextLine">下场抽奖时间:<span id="nextTime">25日10点</span>。</span><br>
        </div>
        <div style="font-size:20px;color:gray;" id="shareTip">(将活动分享到朋友圈可<span style="color:red;font-size:2rem">增加<span style="font-size: 3rem">1</span></span>次抽奖次数)</div>

    </div>
</div>

<div id='tu2' style="display: none;">
    <div id="ruledesc"><{$set.rule}></div>
    <img src="/Public/Wap/redpack/desc.png" id='introduce'  alt="活动说明" >
    <img class='img6' name="imgbtn"  src="/Public/Wap/redpack/close_03.png" width="89" height="86" alt="关闭按钮" onclick="layer.closeAll()">
</div>
<div id='tu3' style="display: none;">
    <div id="prizeListDiv"></div>
    <img src="/Public/Wap/redpack/desc_03.png" id='introduce'  alt="我的奖品" >
    <img class='img5' name="imgbtn"  src="/Public/Wap/redpack/close_03.png" width="89" height="86" alt="关闭按钮" onclick="layer.closeAll()">
</div>



<img src="/Public/Wap/redpack/btn1.png" id='img' width="340" height="108" alt="按钮1" style='position:absolute;left:205px;top:836px; z-index:2 ;border:0;display:none;'>

<a id="prizeList"  href="javascript:void(0)">我的奖品</a>

<img class='img2 gray' name="imgbtn"  src="/Public/Wap/redpack/btn2.png" width="340" height="108" alt="抢红包" id="openbtn">
<img src="<{$set.pic}>" id="animal"/>
<div id="times">(抽奖次数:<span id="timesShow" style="font-size:30px"><{$chanceTimes|default:0}></span>) </div>

<img class='img3' name="imgbtn3" src="/Public/Wap/redpack/introduce_03.png" width="147" height="60" alt="活动按钮" onclick="showIntroduce()">

<div id="container">
    <div id="leafContainer"></div>
</div>


<div id="qr" style="display: none">
    <img src="/Public/Wap/redpack/focus.png" width="597" height="724">
</div>

<audio style="display: none"  id="musicAudio" autoplay="autoplay"  loop="-1">
    <source src="/Public/Wap/redpack/bgm.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

<div class="huadong">
    <div class="huabox">
        <div class="notice_active">
            <ul>
                <{foreach from=$userList item=item}>
                <li class="notice_active_ch">
                    <span><{$item}></span>
                </li>
                <{/foreach}>
            </ul>
        </div>
    </div>
</div>



<script>
    $(document).ready(function(){
        <{if $limitZone eq '1'}>
            $('#openbtn').bind('click',function(){msg('本次抽奖限指定地区用户参加，请开启定位功能，便于确认所在地区');})
        <{else}>
            $('#openbtn').removeClass('gray').on('click',openPack);
        <{/if}>
    });

    function reP(){
        document.getElementById('img1').style.display='block';
    }

    document.getElementById("musicAudio").volume = 0.3;
    document.addEventListener
    (
            'DOMContentLoaded', function()
            {
                function audioAutoPlay()
                {
                    var audio = document.getElementById('musicAudio');
                    audio.play();
                    document.addEventListener
                    (
                            "WeixinJSBridgeReady", function()
                            {
                                audio.play();
                            }, false
                    );
                }
                audioAutoPlay();
            }
    );

    function msg(message) {
        $('#content').html(message);
        layer.open(
                {
                    type: 1,
                    title: false,
                    closeBtn: 0,
                    area: ['532px', '264px'],
                    shadeClose: true,
                    skin: 'layui-layer-nobg',
                    content: $('#tip'),
                    offset: ['434px', '109px'],
                    time:5000
                }
        );

    }

    function showIntroduce(){
        layer.open(
                {
                    type: 1,
                    title: false,
                    closeBtn: 0,
                    area: ['690px', '1050px'],
                    shadeClose: true,
                    skin: 'layui-layer-nobg',
                    content: $('#tu2'),
                    offset: ['100px', '33.5px']
                }
        );
    }
    function showNext(){
        layer.open(
                {
                    type: 1,
                    title: false,
                    closeBtn: 0,
                    area: ['581px', '578px'],
                    shadeClose: true,
                    skin: 'layui-layer-nobg',
                    content: $('#tu1'),
                    offset: ['337.5px', '87.5px']
                }
        );
    }
    function openPack(){
        layer.load(1,{offset:['300px','350px']});
        $.post("<{u('redpackOpen')}>",{address:address},function(ret){
            layer.closeAll();
            switch(ret.status){
                case 0://抢到红包
                    if(ret.msg=="SUCCESS"){
                        if(ret.nextTime==0){
                            $('#nextLine').text('本场为最后一次抽奖');
                            $('#shareTip').text('快将活动分享至朋友圈，邀请朋友参加吧。');
                            showNext();
                        }else{
                            $('#nextTime').text(ret.nextTime);
                            showNext();
                        }
                    }else{
                        msg(ret.msg);
                    }
                        var tim=$('#timesShow').text();
                        var num=parseInt(tim);
                        if(num>=1){$('#timesShow').text(num-1)}
                    break;
                case 1://引导关注
                    layer.open(
                            {
                                type: 1,
                                title: false,
                                closeBtn: 0,
                                area: ['597px', '724px'],
                                shadeClose: true,
                                skin: 'layui-layer-nobg',
                                content: $('#qr'),
                                offset: ['200px', '76px']
                            }
                    );
                    break;
                case 2:
                case 3:
                case 5:
                    msg(ret.msg);
                    break;
                case 6:
                    msg(ret.msg);
                    break;
                case 4://没有机会
                    showShare();
                    break;

            }
        }
    ,"json");
    }

    function showShare(){
        layer.open(
                {
                    type: 1,
                    title: false,
                    closeBtn: 0,
                    area:['690px','1138px'],
                    shadeClose: true,
                    content: $('#share'),
                    offset: ['15px','31px']
                }
        );
    }

    $('.shareBtn').click(showShare);
    $('#prizeList').click(function() {
        $.get("<{u('redpackPrize')}>", function (ret) {

            $('#prizeListDiv').html(ret);
            layer.open(
                    {
                        type: 1,
                        title: false,
                        closeBtn: 0,
                        area: ['575px', '782px'],
                        shadeClose: true,
                        skin: 'layui-layer-nobg',
                        content: $('#tu3'),
                        offset: ['234px', '87.5px']
                    }
            );
        }, 'html')
    });

</script>
<div id="share" onclick="layer.closeAll()" style="display: none"><img src='/Public/Wap/redpack/share.png'></div>
<div id="tip" >
    <div id="table">
    <div id="content"></div>
    </div>
</div>
</body>
</html>